<template>
  <van-overlay
    :show="loading"
    @click="loading = false"
    z-index="9999"
    :custom-style="{ backgroundColor: '#fff' }"
  >
    <div
      class="wrapper"
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      "
      @click.stop
    >
      <IconLoading></IconLoading>
    </div>
  </van-overlay>

  <div class="nav" v-show="!loading">
    <div class="nav-job">
      <van-search placeholder="请输入搜索关键词" />
      <router-link to="/xinxiView"
        ><van-icon class="tubiao" name="chat-o" size="40"
      /></router-link>
    </div>
    <div class="nav-item">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        v-if="HomeInfo.imgData.length > 0"
      >
        <van-swipe-item
          v-for="item in HomeInfo.imgData"
          @click="swiperTap(item)"
        >
          <img :src="item.img" alt="" />
        </van-swipe-item>
      </van-swipe>

      <!-- 骨架屏 -->
      <van-skeleton v-else>
        <template #template>
          <div :style="{ display: 'flex', width: '100%' }">
            <van-skeleton-image />
            <div :style="{ flex: 1, marginLeft: '16px' }">
              <van-skeleton-paragraph row-width="60%" />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
            </div>
          </div>
        </template>
      </van-skeleton>
    </div>
    <div class="middle">
      <div
        class="middle-job"
        v-for="item in HomeInfo.cateData"
        @click="navTo('/goodsList?id=' + item._id)"
      >
        <div>
          <img :src="item.icon" alt="" />
        </div>
        <div style="font-size: 12px">{{ item.name }}</div>
      </div>
    </div>

    <div class="a">
      <div><img src="../../assets/images/gonggao.png" alt="" /></div>
      <div class="a-job">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :touchable="false"
          :show-indicators="false"
        >
          <van-swipe-item v-for="item in HomeInfo.noticeData">{{
            item.title
          }}</van-swipe-item>
        </van-swipe>
      </div>
      <div><img src="../../assets/images/gonggao1.png" alt="" /></div>
    </div>
    <div class="b">
      <img :src="HomeInfo.adRes.adImage" alt="" />
    </div>
    <div class="latest">
      <div>新品上市</div>
      <div class="c">
        <div>NEW</div>
        <div>ARRIVAL</div>
      </div>
      <div>更多></div>
    </div>
    <div class="tu" style="height: 230px">
      <div
        v-for="item in HomeInfo.adRes.list"
        @click="navTo('/goodsList?id=' + item.cate_id)"
        class="img"
        :style="{
          width: item.width + 'px',
          height: item.height + 'px',
          left: item.left + 'px',
          top: item.top ? item.top + 'px' : auto,
          bottom: item.bottom + 'ox',
        }"
      >
        <img :src="item.img" alt="" />
      </div>
    </div>
    <div class="latests">
      <router-link to="/rexiaoView"><div>热销产品</div></router-link>
      <div class="c">
        <div>HOT-SALE</div>
        <div>PRODUCT</div>
      </div>
      <div @click="navTo('/liebiaoView?is_hot=1')">更多></div>
    </div>
    <div class="sell">
      <div class="sell_inner">
        <div
          class="sell-job"
          v-for="item in HomeInfo.hotList"
          @click="navTo('/shangpinView?id=' + item._id)"
        >
          <div>
            <img :src="item.goods_thumb" alt="" />
          </div>
          <div>{{ item.name }}</div>
          <div class="jiage">
            <div>
              ¥<span class="p">{{ item.price / 100 }}</span>
            </div>
            <div>¥{{ item.market_price / 100 }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="recommend">
      <div class="recommend-job">为你推荐</div>
      <div class="wen">
        <div>FOR YOU</div>
        <div>RECOMMENDED</div>
      </div>
    </div>
    <div class="selll">
      <div class="sell-jobb">
        <div><img src="../../assets/images/29.png" alt="" /></div>
        <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
        <div class="jiage">
          <div>¥<span class="p">108</span></div>
          <div>¥ 297</div>
        </div>
      </div>
      <div class="sell-jobb">
        <div><img src="../../assets/images/29.png" alt="" /></div>
        <div>利快KleineWolke德国进口白色浴室摆件套装洗手液</div>
        <div class="jiage">
          <div>¥<span class="p">108</span></div>
          <div>¥ 297</div>
        </div>
      </div>
    </div>
    <div class="selll">
      <div class="sell-jobb">
        <div><img src="../../assets/images/29.png" alt="" /></div>
        <div>SK-II/SK-II 氨基酸泡沫洁面乳温和补水保湿 120g</div>
        <div class="jiage">
          <div>¥<span class="p">108</span></div>
          <div>¥ 297</div>
        </div>
      </div>
      <div class="sell-jobb">
        <div><img src="../../assets/images/29.png" alt="" /></div>
        <div>Antipodes/安媞珀 青柠广藿香洁面乳洗面奶 200ml</div>
        <div class="jiage">
          <div>¥<span class="p">108</span></div>
          <div>¥ 297</div>
        </div>
      </div>
    </div>
    <div class="ding">
      <!-- <van-cell v-for="item in " :key="item" :title="item" /> -->
      <van-back-top right="8vw" bottom="5vh" />
    </div>
  </div>
</template>

<script setup>
import {
  getCategoryIndexShow,
  getBannerList,
  getBannerIndexNotice,
  getHomeAds,
  getGoodsList,
} from "@/api/home";
import { ref, onMounted, reactive } from "vue";
import IconLoading from "@/components/icons/IconLoading.vue";
import { showToast } from "vant";
import router from "@/router";
const HomeInfo = reactive({
  cateData: [],
  imgData: [],
  noticeData: [],
  adRes: {
    list: [],
  },
  hotList: [],
});

const loading = ref(true); //   是否加载中  默认是true

function init(params) {
  // 热销

  getGoodsList({
    is_hot: true,
  }).then((res) => {
    console.log(res);

    HomeInfo.hotList = res.rows;
  });

  // 集合

  Promise.all([
    getCategoryIndexShow(),
    getBannerList(),
    getBannerIndexNotice(),
    getHomeAds(),
  ]).then((res) => {
    console.log(res);

    let [cateRes, bannerRes, noticeRes, adRes] = res;

    if (cateRes.code == 0) {
      HomeInfo.cateData = cateRes.category;
    } else {
      showToast(cateRes.msg);
    }
    if (bannerRes.code == 0) {
      HomeInfo.imgData = bannerRes.rows;
    } else {
      showToast(bannerRes.msg);
    }

    if (noticeRes.code == 0) {
      HomeInfo.noticeData = noticeRes.rows;
    } else {
      showToast(noticeRes.msg);
    }

    if (adRes.code == 0) {
      HomeInfo.adRes = adRes.list[0].data;
    } else {
      showToast(noticeRes.msg);
    }

    loading.value = false;
  });
}

onMounted((v) => {
  init();
});

function swiperTap(item) {
  let { type, type_id } = item;
  if (type == "goods") {
    router.push("/goodsList?id=" + type_id);
  }
}
</script>
<script>
export default {
  name: "home",
};
</script>
<style scoped>
.nav-job {
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
}
.nav-job img {
  width: 30px;
  height: 30px;
  margin-top: 10px;
  padding: 10px;
}
.tubiao {
  line-height: 52px;
  font-size: 30px;
}
.nav-item img {
  width: 355px;
  height: 163px;
}
.my-swipe .van-swipe-item {
  text-align: center;
}
.middle {
  display: flex;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  padding: 10px 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.middle-job {
  width: 55px;
  margin: 10px 5px;
}
.middle img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.a {
  display: flex;
  padding: 10px;
  justify-content: space-between;
  margin-top: 10px;
}
.a-job {
  margin-top: 3px;
  margin-left: 5px;
}
.a img {
  width: 50px;
  height: 50px;
}
.b {
  text-align: center;
}
.b img {
  width: 355px;
  height: 80px;
}
.latest {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  color: var(--baseColor);
}
.c {
  padding-right: 150px;
  font-size: 12px;
  color: #ccc;
}
.tu {
  text-align: center;
  position: relative;
}
.tu .img {
  position: absolute;
}
.tu .img img {
  width: 100%;
  height: 100%;
}
.latests {
  display: flex;
  justify-content: space-around;
  padding: 10px;
}
.sell {
  display: flex;

  padding-left: 20px;
  overflow: hidden;
}
.jiage {
  display: flex;
  margin-top: 5px;
}
.sell-job {
  width: 110px;
  flex: none;
  margin: 0 5px;
}
.sell-job img {
  width: 88px;
  height: 88px;
}
.sell-job div:nth-child(2) {
  font-size: 13px;
}
.jiage div:nth-child(1) {
  color: #f00;
}
.jiage .p {
  color: #f00;
  font-size: 18px;
}
.jiage div:nth-child(2) {
  padding: 5px 15px;
  color: #ccc;
  text-decoration: line-through;
  font-weight: 100;
}
.recommend {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.recommend-job {
  font-size: 18px;
}
.wen {
  color: #ccc;
  font-size: 12px;
  padding: 0 10px;
}
.sell-jobb img {
  width: 134px;
  height: 134px;
}
.sell-jobb {
  padding: 5px 10px;
}
.sell-jobb div:nth-child(2) {
  font-size: 13px;
}
.selll {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.sell_inner {
  display: flex;
  width: 6000px;
  overflow: scroll;
}
</style>
